<script setup lang="tsx">
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import "plus-pro-components/es/components/search/style/css";
import EChartsComponent from "@/components/EChartsComponent/index.vue";
import { PaginationProps } from "@pureadmin/table";
import { exportExcel } from "@/utils/excel";
import { getDataBySQLDesc } from "@/api/common";
import { computed, h, onMounted, reactive, ref } from "vue";
import { ElInput, ElTreeSelect } from "element-plus";
defineOptions({
  name: "QueryYearPrice"
});
const tableRef = ref("tableRef");
const loading = ref(false);
const form = ref({
  cxnd: "",
  hjdjb_nm: "",
  hjdjb_wm: "",
  hjdzt: "",
  jd_nm: "",
  jd_wm: ""
});
const option = ref({
  title: {
    text: "年度线上询价"
  },
  tooltip: {
    trigger: "axis",
    position: function (point, params, dom, rect, size) {
      // point: 鼠标位置，格式为 [x, y]
      // params: 提示框所包含的数据信息
      // dom: 提示框的 DOM 元素
      // rect: 鼠标所在图形的包围盒，格式为 {x, y, width, height}
      // size: 提示框的大小，格式为 {contentSize: [width, height], outerSize: [width, height]}
      return [point[0] - 50, point[1] - 50]; // 设置提示框在鼠标上方 20px 处
    },
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999"
      }
    }
  },
  legend: {
    type: "scroll",
    right: "center",
    data: ["询价数", "平均耗时"]
  },
  xAxis: [
    {
      type: "category",
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ],
      axisPointer: {
        type: "shadow"
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      name: "件",
      axisLabel: {
        formatter: "{value}"
      }
    },
    {
      type: "value",
      name: "分",
      axisLabel: {
        formatter: "{value}"
      }
    }
  ],
  series: [
    {
      name: "询价数",
      type: "bar",
      yAxisIndex: 0,
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: []
    },
    {
      name: "平均耗时",
      type: "line",
      smooth: true,
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: []
    }
  ]
});
const searchColumns = computed<PlusColumn[]>(() => [
  {
    label: "审核时间",
    prop: "cxnd",
    valueType: "date-picker",
    fieldProps: {
      type: "year",
      valueFormat: "YYYY",
      placeholder: "请选择审核时间"
    }
  }
]);
/** 分页配置 */
const pagination = reactive<PaginationProps>({
  pageSize: 10,
  currentPage: 1,
  pageSizes: [10, 15, 20],
  total: 0,
  align: "right",
  background: true,
  size: "default",
  layout: "prev, pager, next"
});
const tableData = ref([]);
const columns = ref([
  {
    prop: "项目",
    label: "项目",
    width: 120
  },
  {
    prop: "1月BOM数",
    label: "1月",
    children: [
      { label: "询价数", prop: "1月询价数" },
      { label: "平均耗时", prop: "1月平均耗时", width: 90 }
    ]
  },
  {
    prop: "2月BOM数",
    label: "2月",
    children: [
      { label: "询价数", prop: "2月询价数" },
      { label: "平均耗时", prop: "2月平均耗时", width: 90 }
    ]
  },
  {
    prop: "3月BOM数",
    label: "3月",
    children: [
      { label: "询价数", prop: "3月询价数" },
      { label: "平均耗时", prop: "3月平均耗时", width: 90 }
    ]
  },
  {
    prop: "4月BOM数",
    label: "4月",
    children: [
      { label: "询价数", prop: "4月询价数" },
      { label: "平均耗时", prop: "4月平均耗时", width: 90 }
    ]
  },
  {
    prop: "5月BOM数",
    label: "5月",
    children: [
      { label: "询价数", prop: "5月询价数" },
      { label: "平均耗时", prop: "5月平均耗时", width: 90 }
    ]
  },
  {
    prop: "6月BOM数",
    label: "6月",
    children: [
      { label: "询价数", prop: "6月询价数" },
      { label: "平均耗时", prop: "6月平均耗时", width: 90 }
    ]
  },
  {
    prop: "7月BOM数",
    label: "7月",
    children: [
      { label: "询价数", prop: "7月询价数" },
      { label: "平均耗时", prop: "7月平均耗时", width: 90 }
    ]
  },
  {
    prop: "8月BOM数",
    label: "8月",
    children: [
      { label: "询价数", prop: "8月询价数" },
      { label: "平均耗时", prop: "8月平均耗时", width: 90 }
    ]
  },
  {
    prop: "9月BOM数",
    label: "9月",
    children: [
      { label: "询价数", prop: "9月询价数" },
      { label: "平均耗时", prop: "9月平均耗时", width: 90 }
    ]
  },
  {
    prop: "10月BOM数",
    label: "10月",
    children: [
      { label: "询价数", prop: "10月询价数" },
      { label: "平均耗时", prop: "10月平均耗时", width: 90 }
    ]
  },
  {
    prop: "11月BOM数",
    label: "11月",
    children: [
      { label: "询价数", prop: "11月询价数" },
      { label: "平均耗时", prop: "11月平均耗时", width: 90 }
    ]
  },
  {
    prop: "12月BOM数",
    label: "12月",
    children: [
      { label: "询价数", prop: "12月询价数" },
      { label: "平均耗时", prop: "12月平均耗时", width: 90 }
    ]
  },
  {
    prop: "小计",
    label: "年度",
    children: [
      {
        label: "询价数",
        prop: "年询价数"
      },
      { label: "平均耗时", prop: "年平均耗时", width: 90 }
    ]
  }
]);
const getTime = async () => {
  const { data } = await getDataBySQLDesc({
    action: "public/get_server_sysdate"
  });
  form.value.cxnd = data[0].年;
  option.value.title.text = `${form.value.cxnd}年度线上询价`;
  getAllParams();
};
const getData = async () => {
  let params = {
    action: "biz/reports/get_cts_xsxj_nd",
    ...form.value
  };
  const { data } = await getDataBySQLDesc(params);
  let chartData = data[data.length - 1];
  let reqTableData = data.slice(0, -1);
  option.value.series[0].data = [];
  option.value.series[1].data = [];
  for (var i = 1; i <= 12; i++) {
    option.value.series[0].data.push(chartData[`${i}月询价数`] || 0);
    option.value.series[1].data.push(chartData[`${i}月平均耗时`] || 0);
  }
  tableData.value = data;
};
const handleSearch = async () => {
  getData();
};
const handleRest = () => {
  getTime();
};
const getAllParams = async () => {
  let yearParams = {
    action: "public/get_bi_sjfw",
    hsmc: "get_cts_xsxj_nd"
  };
  const { data: paramsData } = await getDataBySQLDesc(yearParams);
  paramsData.forEach(element => {
    form.value[element["参数编码"]] = element["参数值"];
  });
  getData();
};
onMounted(() => {
  getTime();
});
</script>

<template>
  <div class="page-content">
    <el-card>
      <PlusSearch v-model="form" searchText="搜索" resetText="重置" expand-text="展开" retractText="收起"
        :columns="searchColumns" :show-number="2" label-width="80" label-position="right" @search="handleSearch"
        @reset="handleRest" />
    </el-card>
    <el-card class="chart-card mt-[20px]">
      <div class="chart bar-chart">
        <EChartsComponent :extraOptions="option" type="bar" />
      </div>
    </el-card>
    <el-card class="table-card">
      <div class="operate">
        <el-button type="primary" @click="exportExcel(tableData, '年度BOM应用.xlsx')">导出</el-button>
      </div>
      <PureTable :ref="tableRef" :loading="loading" border row-key="id" alignWhole="center" showOverflowTooltip
        :data="tableData" :columns="columns" :pagination="null" />
    </el-card>
  </div>
</template>
<style lang="css" scoped>
.table-card {
  margin-top: 20px;
}

.operate {
  margin-bottom: 20px;
}

.chart {
  height: 400px;
}
</style>
